<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta name="exporter-version" content="Evernote Mac 9.5.4 (463801)"/><meta name="author" content="704206198@qq.com"/><meta name="created" content="2017-11-24 02:12:52 +0000"/><meta name="source" content="desktop.mac"/><meta name="updated" content="2020-06-03 06:02:19 +0000"/><title>DAY28：设计模式</title></head><body><div><span style="font-size: 18px; font-family: &quot;Courier New&quot;;">一、设计模式：</span></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><span style="font-family: &quot;Courier New&quot;; font-size: 14px;">什么是设计模式：</span></div><div><span style="font-family: &quot;Courier New&quot;; font-size: 14px;">    是一套经过反复使用、多人知晓的、经过分类的、代码设计经验的总结</span></div><div><br/></div><div><span style="font-family: &quot;Courier New&quot;; font-size: 14px;">为什么使用设计模式：</span></div><div><span style="font-family: &quot;Courier New&quot;; font-size: 14px;">    为了代码的可重用性、让代码更容易被他人理解、保证代码的可靠性。设计模式使代码的编写真正的工程化；设计模式是软件工程的基石脉络，如同大厦的结构</span></div><div><br/></div><div><span style="font-size: 14px; font-family: &quot;Courier New&quot;;">有哪些设计模式（来自W3school，23种）：</span></div><div><span style="font-size: 14px; font-family: &quot;Courier New&quot;;">    构造器模式，模块化模式，暴露模块模式，单例模式，中介者模式，原型模式，命令模式，外观模式，工厂模式，Mixin模式，装饰模式，亨元(Flyweight)模式，MVC模式，MVP模式，MVVM模式，组合模式，适配器模式，外观模式，观察者模式，迭代器模式，惰性初始模式，代理模式，建造者模式</span></div><div><br/></div><div><br/></div></div><div><br/></div><div><span style="font-size: 18px;">单例模式</span></div><div style="box-sizing: border-box; padding: 8px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);"><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">单个实例，</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">只有一个对象</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">//多次创建，返回同一个对象</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;"> </span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">function fn(){</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    if(!fn.obj) { </span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(255, 122, 116); font-family: Monaco; font-weight: bold;">//给函数添加一个属性。 因为函数是全局的，所以该属性一旦添加一直存在;</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">         fn.obj = {</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">             name : “liyang"</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">         };</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    }</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    return fn.obj;</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">}</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">var obj1 = new fn();</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">var obj2 = new fn();</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">console.log(obj1 == obj2);</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">//</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(150, 238, 125); font-family: Monaco;">例如我们创建一个信息提示框，每一次执行toast方法，如果都创建一个新的元素，这样做太浪费了。</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">//</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(255, 122, 116); font-family: Monaco;">因此，我们采取单例模式，确保无论调用多少次toast方法，都只创建一个DOM元素</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">。</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">//</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(255, 122, 116); font-family: Monaco;">我们只控制它的显示和隐藏，而不是每次创建每次销毁。</span></div><div style="font-size: 12px;"><br style="color: rgb(51, 51, 51);"/></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(70, 99, 204); font-family: Monaco;">function</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(228, 139, 0); font-family: Monaco;">Toast</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">(){</span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(70, 99, 204); font-family: Monaco;">    var</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">div</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(105, 137, 6); font-family: Monaco;">=</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(74, 138, 1); font-family: Monaco;">document</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">.createElement(</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(40, 156, 151); font-family: Monaco;">"div"</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">);</span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">    div.className</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(105, 137, 6); font-family: Monaco;">=</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(40, 156, 151); font-family: Monaco;">"box"</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">;</span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(74, 138, 1); font-family: Monaco;">    document</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">.body.appendChild(div);</span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(228, 139, 0); font-family: Monaco;">    setTimeout</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">(</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(70, 99, 204); font-family: Monaco;">function</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">(){</span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">        div.remove();</span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">    },</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(173, 66, 239); font-family: Monaco;">1000</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">)</span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">}</span></div><div style="font-size: 12px;"><br/></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">obtn.</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(228, 139, 0); font-family: Monaco;">onclick</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(105, 137, 6); font-family: Monaco;">=</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(70, 99, 204); font-family: Monaco;">function</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">(){</span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(105, 137, 6); font-family: Monaco;">    var a = new Toast();</span></div><div style="font-size: 12px;"><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">    var b = new Toast();</span></div></div><div style="font-size: 12px;"><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">    console.log(a == b)</span></div></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">}</span></div><div style="font-size: 12px;"><br/></div><div style="font-size: 12px;"><br/></div><div style="font-size: 12px;"><br/></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(70, 99, 204); font-family: Monaco;">function</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(228, 139, 0); font-family: Monaco;">Toast</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">(){</span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(105, 137, 6); font-family: Monaco;">    if</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">(</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(105, 137, 6); font-family: Monaco;">!</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">Toast.div){</span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">        Toast.div</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(105, 137, 6); font-family: Monaco;">=</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(74, 138, 1); font-family: Monaco;">document</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">.createElement(</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(40, 156, 151); font-family: Monaco;">"div"</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">);</span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">        Toast.div.className</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(105, 137, 6); font-family: Monaco;">=</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(40, 156, 151); font-family: Monaco;">"box"</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">;</span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(74, 138, 1); font-family: Monaco;">        document</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">.body.appendChild(Toast.div);</span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">            clearTimeout(Toast.div.timer);</span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">            Toast.div.</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(228, 139, 0); font-family: Monaco;">timer</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(105, 137, 6); font-family: Monaco;">=</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(228, 139, 0); font-family: Monaco;">setTimeout</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">(</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(70, 99, 204); font-family: Monaco;">function</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">(){</span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">            Toast.div.</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(74, 138, 1); font-family: Monaco;">style</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">.display</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(105, 137, 6); font-family: Monaco;">=</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(40, 156, 151); font-family: Monaco;">"none"</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">;</span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">        },</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(173, 66, 239); font-family: Monaco;">1000</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">)</span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">    }</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(105, 137, 6); font-family: Monaco;">else</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">{</span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">        Toast.div.</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(74, 138, 1); font-family: Monaco;">style</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">.display</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(105, 137, 6); font-family: Monaco;">=</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(40, 156, 151); font-family: Monaco;">"block"</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">;</span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">        clearTimeout(Toast.div.timer);</span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">            Toast.div.</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(228, 139, 0); font-family: Monaco;">timer</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(105, 137, 6); font-family: Monaco;">=</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(228, 139, 0); font-family: Monaco;">setTimeout</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">(</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(70, 99, 204); font-family: Monaco;">function</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">(){</span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">            Toast.div.</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(74, 138, 1); font-family: Monaco;">style</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">.display</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(105, 137, 6); font-family: Monaco;">=</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(40, 156, 151); font-family: Monaco;">"none"</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">;</span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">        },</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(173, 66, 239); font-family: Monaco;">1000</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">)</span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">    }</span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(105, 137, 6); font-family: Monaco;">    return</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">Toast;</span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">}</span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">obtn.</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(228, 139, 0); font-family: Monaco;">onclick</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(105, 137, 6); font-family: Monaco;">=</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(70, 99, 204); font-family: Monaco;">function</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">(){</span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(70, 99, 204); font-family: Monaco;">    var</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">a</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(105, 137, 6); font-family: Monaco;">= new</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">Toast();</span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(70, 99, 204); font-family: Monaco;">    var</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">b</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(105, 137, 6); font-family: Monaco;">= new</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">Toast();</span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(74, 138, 1); font-family: Monaco;">    console</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">.log(a</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(105, 137, 6); font-family: Monaco;">==</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">b);</span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">}</span></div></div><div><br/></div><div><span style="font-size: 18px; font-family: Monaco;">组合模式</span></div><div style="box-sizing: border-box; padding: 8px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);"><div><span style="font-size: 14px; color: rgb(69, 69, 69); font-family: Monaco;">组合模式：把多个对象组成树状结构来表示局部与整体，使得用户可以同时操作单个对象和对象的组合。</span></div><div><br/></div><div><span style="font-size: 14px; color: rgb(69, 69, 69); font-family: Monaco; font-variant-caps: normal;">    1.</span><span style="font-size: 14px; color: rgb(69, 69, 69); font-family: Monaco; font-variant-caps: normal;">可以以相同的方法处理对象的集合与其中的特定子对象。组合对象与组成该对象的对象可实现同一批的操作，对组合对象执行的操作会向下传递到所有的组成对象，使得所有组成对象都会执行同样的操作。</span></div><div><br/></div><div><span style="font-size: 14px; color: rgb(69, 69, 69); font-family: Monaco; font-variant-caps: normal;">    2.</span><span style="font-size: 14px; color: rgb(69, 69, 69); font-family: Monaco; font-variant-caps: normal;">可以将对象组织成树状结构，并且使整棵树可被遍历，所有组合对象都实现一个用来获取其子对象的方法，借助该方法可以隐藏实现的细节，组织子对象，使子对象内部的实现不形成依赖</span></div><div><br/></div><div><span style="font-size: 14px; color: rgb(69, 69, 69); font-family: Monaco; font-variant-caps: normal;">对于创建动态用户界面来说，组合模式可以算是为其量身定做的，因为</span><span style="font-size: 14px; color: rgb(69, 69, 69); font-family: Monaco; font-variant-caps: normal;">HTML</span><span style="font-size: 14px; color: rgb(69, 69, 69); font-family: Monaco; font-variant-caps: normal;">结构正好符合组合模式适用场景的结构。</span></div><div><span style="font-size: 14px; color: rgb(69, 69, 69); font-family: Monaco; font-variant-caps: normal;">    1.</span><span style="font-size: 14px; color: rgb(69, 69, 69); font-family: Monaco; font-variant-caps: normal;">存在一批组织成某种层次体系的对象</span></div><div><span style="font-size: 14px; color: rgb(69, 69, 69); font-family: Monaco; font-variant-caps: normal;">    2.</span><span style="font-size: 14px; color: rgb(69, 69, 69); font-family: Monaco; font-variant-caps: normal;">希望对这批对象或者其中某一部分对象实施一个操作</span></div><div><span style="font-size: 14px; color: rgb(69, 69, 69); font-family: Monaco; font-variant-caps: normal;">组合模式擅长对大批量对象进行操作，转为组织这类对象把操作从一个层次向下一个层次传递设计，借此可以弱化对象间的耦合关系并且可以互换使用一些类或者实例，使代码模块化程度更高，维护更容易。</span></div><div style="font-size: 12px;"><br/></div><div style="font-size: 12px;"><br/></div><div><div><font face="Monaco" style="font-size: 12px;"><span style="color: rgb(70, 99, 204); font-variant-caps: normal;">function</span> <span style="color: rgb(228, 139, 0); font-variant-caps: normal;">ImagesStore</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">(</span> <span style="color: rgb(181, 138, 0); font-variant-caps: normal;">id</span> <span style="color: rgb(6, 6, 6); font-variant-caps: normal;">){</span></font></div><div><font face="Monaco" style="font-size: 12px;"><span style="color: rgb(70, 99, 204); font-variant-caps: normal;">    this</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">.children</span> <span style="color: rgb(105, 137, 6); font-variant-caps: normal;">=</span> <span style="color: rgb(6, 6, 6); font-variant-caps: normal;">[];</span></font></div><div><font face="Monaco" style="font-size: 12px;"><span style="color: rgb(70, 99, 204); font-variant-caps: normal;">    this</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">.</span><span style="color: rgb(74, 138, 1); font-variant-caps: normal;">element</span> <span style="color: rgb(105, 137, 6); font-variant-caps: normal;">=</span> <span style="color: rgb(74, 138, 1); font-variant-caps: normal;">document</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">.createElement(</span><span style="color: rgb(40, 156, 151); font-variant-caps: normal;">"div"</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">);</span></font></div><div><font face="Monaco" style="font-size: 12px;"><span style="color: rgb(70, 99, 204); font-variant-caps: normal;">    this</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">.</span><span style="color: rgb(74, 138, 1); font-variant-caps: normal;">element</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">.id</span> <span style="color: rgb(105, 137, 6); font-variant-caps: normal;">=</span> <span style="color: rgb(6, 6, 6); font-variant-caps: normal;">id;</span></font></div><div><font face="Monaco" style="font-size: 12px;"><span style="color: rgb(70, 99, 204); font-variant-caps: normal;">    this</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">.</span><span style="color: rgb(74, 138, 1); font-variant-caps: normal;">element</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">.className</span> <span style="color: rgb(105, 137, 6); font-variant-caps: normal;">=</span> <span style="color: rgb(40, 156, 151); font-variant-caps: normal;">"imgs-store"</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">;</span></font></div><div><font face="Monaco" style="font-size: 12px;"><span style="color: rgb(74, 138, 1); font-variant-caps: normal;">    document</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">.</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">body.appendChild(</span><span style="color: rgb(70, 99, 204); font-variant-caps: normal;">this</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">.</span><span style="color: rgb(74, 138, 1); font-variant-caps: normal;">element</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">)</span></font></div><div><span style="color: rgb(6, 6, 6); font-variant-caps: normal;"><font face="Monaco" style="font-size: 12px;">}</font></span></div><div><font face="Monaco" style="font-size: 12px;"><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">ImagesStore.prototype</span> <span style="color: rgb(105, 137, 6); font-variant-caps: normal;">=</span> <span style="color: rgb(6, 6, 6); font-variant-caps: normal;">{</span></font></div><div><font face="Monaco" style="font-size: 12px;"><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">    constructor</span> <span style="color: rgb(79, 93, 102); font-variant-caps: normal;">:</span> <span style="color: rgb(6, 6, 6); font-variant-caps: normal;">ImagesStore,</span></font></div><div><font face="Monaco" style="font-size: 12px;"><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">    add</span><span style="color: rgb(79, 93, 102); font-variant-caps: normal;">:</span><span style="color: rgb(70, 99, 204); font-variant-caps: normal;">function</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">(</span> <span style="color: rgb(181, 138, 0); font-variant-caps: normal;">child</span> <span style="color: rgb(6, 6, 6); font-variant-caps: normal;">){</span></font></div><div><font face="Monaco" style="font-size: 12px;"><span style="color: rgb(70, 99, 204); font-variant-caps: normal;">        this</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">.children.push( child );</span></font></div><div><font face="Monaco" style="font-size: 12px;"><span style="color: rgb(70, 99, 204); font-variant-caps: normal;">        this</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">.</span><span style="color: rgb(74, 138, 1); font-variant-caps: normal;">element</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">.appendChild( child.getElement() );</span></font></div><div><span style="color: rgb(6, 6, 6); font-variant-caps: normal;"><font face="Monaco" style="font-size: 12px;">    },</font></span></div><div><font face="Monaco" style="font-size: 12px;"><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">    remove</span><span style="color: rgb(79, 93, 102); font-variant-caps: normal;">:</span><span style="color: rgb(70, 99, 204); font-variant-caps: normal;">function</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">(</span> <span style="color: rgb(181, 138, 0); font-variant-caps: normal;">child</span> <span style="color: rgb(6, 6, 6); font-variant-caps: normal;">){</span></font></div><div><font face="Monaco" style="font-size: 12px;"><span style="color: rgb(105, 137, 6); font-variant-caps: normal;">        for</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">(</span> <span style="color: rgb(70, 99, 204); font-variant-caps: normal;">var </span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">i</span><span style="color: rgb(105, 137, 6); font-variant-caps: normal;">=</span><span style="color: rgb(173, 66, 239); font-variant-caps: normal;">0</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">; </span><font color="#4a8a01"><span style="caret-color: rgb(74, 138, 1);">i</span>&lt;</font> <span style="color: rgb(70, 99, 204); font-variant-caps: normal;">this</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">.children.length; i</span><span style="color: rgb(105, 137, 6); font-variant-caps: normal;">++</span> <span style="color: rgb(6, 6, 6); font-variant-caps: normal;">){</span></font></div><div><font face="Monaco" style="font-size: 12px;"><span style="color: rgb(105, 137, 6); font-variant-caps: normal;">            if</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">(</span> <span style="color: rgb(74, 138, 1); font-variant-caps: normal;">this.children[i]</span> <span style="color: rgb(105, 137, 6); font-variant-caps: normal;">===</span> <span style="color: rgb(6, 6, 6); font-variant-caps: normal;">child ){</span></font></div><div><font face="Monaco" style="font-size: 12px;"><span style="color: rgb(70, 99, 204); font-variant-caps: normal;">                this</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">.children.splice( i,</span> <span style="color: rgb(173, 66, 239); font-variant-caps: normal;">1</span> <span style="color: rgb(6, 6, 6); font-variant-caps: normal;">);</span></font></div><div><font face="Monaco" style="font-size: 12px;"><span style="color: rgb(105, 137, 6); font-variant-caps: normal;">                break</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">;</span></font></div><div><span style="color: rgb(6, 6, 6); font-variant-caps: normal;"><font face="Monaco" style="font-size: 12px;">            }</font></span></div><div><span style="color: rgb(6, 6, 6); font-variant-caps: normal;"><font face="Monaco" style="font-size: 12px;">        }</font></span></div><div><font face="Monaco" style="font-size: 12px;"><span style="color: rgb(70, 99, 204); font-variant-caps: normal;"> </span><span style="color: rgb(70, 99, 204); font-variant-caps: normal;">   </span><span style="color: rgb(70, 99, 204); font-variant-caps: normal;">    </span><span style="color: rgb(70, 99, 204); font-variant-caps: normal;">this</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">.</span><span style="color: rgb(74, 138, 1); font-variant-caps: normal;">element</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">.removeChild( child.getElement() );</span></font></div><div><span style="color: rgb(6, 6, 6); font-variant-caps: normal;"><font face="Monaco" style="font-size: 12px;">    },</font></span></div><div><font face="Monaco" style="font-size: 12px;"><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">    </span><font><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">show</span><span style="color: rgb(79, 93, 102); font-variant-caps: normal;">:</span><span style="color: rgb(70, 99, 204); font-variant-caps: normal;">function</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">(){</span></font></font></div><div><font face="Monaco" style="font-size: 12px;"><span style="color: rgb(70, 99, 204); font-variant-caps: normal;">        this</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">.</span><span style="color: rgb(74, 138, 1); font-variant-caps: normal;">element</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">.</span><span style="color: rgb(74, 138, 1); font-variant-caps: normal;">style</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">.border</span> <span style="color: rgb(105, 137, 6); font-variant-caps: normal;">= </span><span style="color: #289c97;">'</span><font style="color: rgb(40, 156, 151);">solid 2px blac<font>k'</font></font><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">;</span></font></div><div><font face="Monaco" style="font-size: 12px;"><span style="color: rgb(105, 137, 6); font-variant-caps: normal;">        for</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">(</span> <span style="color: rgb(70, 99, 204); font-variant-caps: normal;">var</span> <span style="color: rgb(6, 6, 6); font-variant-caps: normal;">i</span><span style="color: rgb(105, 137, 6); font-variant-caps: normal;">=</span><span style="color: rgb(173, 66, 239); font-variant-caps: normal;">0</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">;</span> <font color="#4a8a01">i&lt;</font><span style="color: rgb(70, 99, 204);">this</span><span style="color: rgb(6, 6, 6);">.children.length; i</span><span style="color: rgb(105, 137, 6);">++</span> <span style="color: rgb(6, 6, 6);">){</span></font></div><div><font face="Monaco" style="font-size: 12px;"><span style="color: rgb(74, 138, 1); font-variant-caps: normal;">            this.children[i]</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">.show();</span></font></div><div><span style="color: rgb(6, 6, 6); font-variant-caps: normal;"><font face="Monaco" style="font-size: 12px;">        }</font></span></div><div><span style="color: rgb(6, 6, 6); font-variant-caps: normal;"><font face="Monaco" style="font-size: 12px;">    },</font></span></div><div><font face="Monaco" style="font-size: 12px;"><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">    </span><font><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">hide</span><span style="color: rgb(79, 93, 102); font-variant-caps: normal;">:</span><span style="color: rgb(70, 99, 204); font-variant-caps: normal;">function</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">(){</span></font></font></div><div><font face="Monaco" style="font-size: 12px;"><span style="color: rgb(105, 137, 6); font-variant-caps: normal;">        for</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">(</span> <span style="color: rgb(70, 99, 204); font-variant-caps: normal;">var</span> <span style="color: rgb(6, 6, 6); font-variant-caps: normal;">i</span><span style="color: rgb(105, 137, 6); font-variant-caps: normal;">=</span><span style="color: rgb(173, 66, 239); font-variant-caps: normal;">0</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">;</span> I&lt;<span style="color: rgb(70, 99, 204); font-variant-caps: normal;">this</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">.children.length; i</span><span style="color: rgb(105, 137, 6); font-variant-caps: normal;">++</span> <span style="color: rgb(6, 6, 6); font-variant-caps: normal;">){</span></font></div><div><font face="Monaco" style="font-size: 12px;"><span style="color: rgb(74, 138, 1); font-variant-caps: normal;">            this.children[i]</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">.hide();</span></font></div><div><span style="color: rgb(6, 6, 6); font-variant-caps: normal;"><font face="Monaco" style="font-size: 12px;">        }</font></span></div><div><font face="Monaco" style="font-size: 12px;"><span style="color: rgb(70, 99, 204); font-variant-caps: normal;">        this</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">.</span><span style="color: rgb(74, 138, 1); font-variant-caps: normal;">element</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">.</span><span style="color: rgb(74, 138, 1); font-variant-caps: normal;">style</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">.border</span> <span style="color: rgb(105, 137, 6); font-variant-caps: normal;">=</span> <span style="color: rgb(40, 156, 151); font-variant-caps: normal;">'none'</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">;</span></font></div><div><span style="color: rgb(6, 6, 6); font-variant-caps: normal;"><font face="Monaco" style="font-size: 12px;">    },</font></span></div><div><font face="Monaco" style="font-size: 12px;"><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">    getElement</span><span style="color: rgb(79, 93, 102); font-variant-caps: normal;">:</span><span style="color: rgb(70, 99, 204); font-variant-caps: normal;">function</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">(){</span></font></div><div><font face="Monaco" style="font-size: 12px;"><span style="color: rgb(105, 137, 6); font-variant-caps: normal;">        return</span> <span style="color: rgb(70, 99, 204); font-variant-caps: normal;">this</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">.</span><span style="color: rgb(74, 138, 1); font-variant-caps: normal;">element</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">;</span></font></div><div><span style="color: rgb(6, 6, 6); font-variant-caps: normal;"><font face="Monaco" style="font-size: 12px;">    }</font></span></div><div><span style="color: rgb(6, 6, 6); font-variant-caps: normal;"><font face="Monaco" style="font-size: 12px;">}</font></span></div><div style="font-size: 12px;"><span style="font-size: 12px; color: rgb(69, 69, 69); font-family: Monaco;">   </span><span style="font-size: 12px;" /><span style="font-size: 12px; color: rgb(133, 132, 133); font-family: Monaco;">//上面的组合对象中我们可以看出，原型上的</span><span style="font-size: 12px; color: rgb(133, 132, 133); font-family: Monaco;">hide</span><span style="font-size: 12px; color: rgb(133, 132, 133); font-family: Monaco;">和</span><span style="font-size: 12px; color: rgb(133, 132, 133); font-family: Monaco;">show</span><span style="font-size: 12px; color: rgb(133, 132, 133); font-family: Monaco;">方法不单单是对于当前</span><span style="font-size: 12px; color: rgb(133, 132, 133); font-family: Monaco;">element</span><span style="font-size: 12px; color: rgb(133, 132, 133); font-family: Monaco;">进行处理，还延伸到其包含的每一个叶对象上执行。这边就体现了组合模式的运行机制，一条命令在多个对象上激发复杂的或者递归的行为。</span></div><div style="font-size: 12px;"><br/></div><div style="font-size: 12px;"><br/></div><div><font face="Monaco" style="font-size: 12px;"><span style="color: rgb(70, 99, 204); font-variant-caps: normal;">function</span> <span style="color: rgb(228, 139, 0); font-variant-caps: normal;">ImageItem</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">(</span> <span style="color: rgb(181, 138, 0); font-variant-caps: normal;">src</span> <span style="color: rgb(6, 6, 6); font-variant-caps: normal;">){</span></font></div><div><font face="Monaco" style="font-size: 12px;"><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">   </span> <span style="color: rgb(70, 99, 204); font-variant-caps: normal;">this</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">.</span><span style="color: rgb(74, 138, 1); font-variant-caps: normal;">element</span> <span style="color: rgb(105, 137, 6); font-variant-caps: normal;">=</span> <span style="color: rgb(74, 138, 1); font-variant-caps: normal;">document</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">.createElement(</span><span style="color: rgb(40, 156, 151); font-variant-caps: normal;">"img"</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">);</span></font></div><div><font face="Monaco" style="font-size: 12px;"><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">   </span> <span style="color: rgb(70, 99, 204); font-variant-caps: normal;">this</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">.</span><span style="color: rgb(74, 138, 1); font-variant-caps: normal;">element</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">.src</span> <span style="color: rgb(105, 137, 6); font-variant-caps: normal;">=</span> <span style="color: rgb(6, 6, 6); font-variant-caps: normal;">src;</span></font></div><div><font face="Monaco" style="font-size: 12px;"><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">   </span> <span style="color: rgb(70, 99, 204); font-variant-caps: normal;">this</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">.</span><span style="color: rgb(74, 138, 1); font-variant-caps: normal;">element</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">.className</span> <span style="color: rgb(105, 137, 6); font-variant-caps: normal;">=</span> <span style="color: rgb(40, 156, 151); font-variant-caps: normal;">"img-item"</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">;</span></font></div><div><span style="color: rgb(6, 6, 6); font-variant-caps: normal;"><font face="Monaco" style="font-size: 12px;">}</font></span></div><div><font face="Monaco" style="font-size: 12px;"><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">ImageItem.prototype</span> <span style="color: rgb(105, 137, 6); font-variant-caps: normal;">=</span> <span style="color: rgb(6, 6, 6); font-variant-caps: normal;">{</span></font></div><div><font face="Monaco" style="font-size: 12px;"><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">    constructor</span><span style="color: rgb(79, 93, 102); font-variant-caps: normal;">:</span><span style="color: rgb(228, 139, 0); font-variant-caps: normal;">ImageItem</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">,</span></font></div><div><font face="Monaco" style="font-size: 12px;"><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">    add</span><span style="color: rgb(79, 93, 102); font-variant-caps: normal;">:</span><span style="color: rgb(70, 99, 204); font-variant-caps: normal;">function</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">(</span> <span style="color: rgb(181, 138, 0); font-variant-caps: normal;">child</span> <span style="color: rgb(6, 6, 6); font-variant-caps: normal;">){</span></font></div><div><font face="Monaco" style="font-size: 12px;"><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">       </span> <span style="color: rgb(105, 137, 6); font-variant-caps: normal;">console.log</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">(</span><span style="color: rgb(40, 156, 151); font-variant-caps: normal;">"this is image object, no add function"</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">);</span></font></div><div><span style="color: rgb(6, 6, 6); font-variant-caps: normal;"><font face="Monaco" style="font-size: 12px;">    },</font></span></div><div><font face="Monaco" style="font-size: 12px;"><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">    remove</span><span style="color: rgb(79, 93, 102); font-variant-caps: normal;">:</span><span style="color: rgb(70, 99, 204); font-variant-caps: normal;">function</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">(</span> <span style="color: rgb(181, 138, 0); font-variant-caps: normal;">child</span> <span style="color: rgb(6, 6, 6); font-variant-caps: normal;">){</span></font></div><div><font face="Monaco" style="font-size: 12px;"><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">       </span> <span style="color: rgb(105, 137, 6); font-variant-caps: normal;">console.log</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">(</span><span style="color: rgb(40, 156, 151); font-variant-caps: normal;">"this is image object, no remove function"</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">);</span></font></div><div><span style="color: rgb(6, 6, 6); font-variant-caps: normal;"><font face="Monaco" style="font-size: 12px;">    },</font></span></div><div><font face="Monaco" style="font-size: 12px;"><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">    show</span><span style="color: rgb(79, 93, 102); font-variant-caps: normal;">:</span><span style="color: rgb(70, 99, 204); font-variant-caps: normal;">function</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">(){</span></font></div><div><font face="Monaco" style="font-size: 12px;"><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">       </span> <span style="color: rgb(70, 99, 204); font-variant-caps: normal;">this</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">.</span><span style="color: rgb(74, 138, 1); font-variant-caps: normal;">element</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">.</span><span style="color: rgb(74, 138, 1); font-variant-caps: normal;">style</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">.border</span> <span style="color: rgb(105, 137, 6); font-variant-caps: normal;">= </span> <font color="#289c97"><span style="caret-color: rgb(40, 156, 151);">‘</span>solid 2px black'</font><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">;</span></font></div><div><span style="color: rgb(6, 6, 6); font-variant-caps: normal;"><font face="Monaco" style="font-size: 12px;">    },</font></span></div><div><font face="Monaco" style="font-size: 12px;"><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">    hide</span><span style="color: rgb(79, 93, 102); font-variant-caps: normal;">:</span><span style="color: rgb(70, 99, 204); font-variant-caps: normal;">function</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">(){</span></font></div><div><font face="Monaco" style="font-size: 12px;"><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">       </span> <span style="color: rgb(70, 99, 204); font-variant-caps: normal;">this</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">.</span><span style="color: rgb(74, 138, 1); font-variant-caps: normal;">element</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">.</span><span style="color: rgb(74, 138, 1); font-variant-caps: normal;">style</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">.border</span> <span style="color: rgb(105, 137, 6); font-variant-caps: normal;">=</span> <span style="color: rgb(40, 156, 151); font-variant-caps: normal;">'none'</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">;</span></font></div><div><span style="color: rgb(6, 6, 6); font-variant-caps: normal;"><font face="Monaco" style="font-size: 12px;">    },</font></span></div><div><font face="Monaco" style="font-size: 12px;"><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">    getElement</span><span style="color: rgb(79, 93, 102); font-variant-caps: normal;">:</span><span style="color: rgb(70, 99, 204); font-variant-caps: normal;">function</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">(){</span></font></div><div><font face="Monaco" style="font-size: 12px;"><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">       </span> <span style="color: rgb(105, 137, 6); font-variant-caps: normal;">return</span> <span style="color: rgb(70, 99, 204); font-variant-caps: normal;">this</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">.</span><span style="color: rgb(74, 138, 1); font-variant-caps: normal;">element</span><span style="color: rgb(6, 6, 6); font-variant-caps: normal;">;</span></font></div><div><span style="color: rgb(6, 6, 6); font-variant-caps: normal;"><font face="Monaco" style="font-size: 12px;">    }</font></span></div><div><span style="color: rgb(6, 6, 6); font-variant-caps: normal;"><font face="Monaco" style="font-size: 12px;">}</font></span></div></div><div><br/></div><div><span style="font-size: 14px; color: rgb(69, 69, 69); font-family: Monaco; font-variant-caps: normal;">    使用组合模式组织起来的对象具有出色的层次结构，每当对顶层组合对象执行一个操作的时候，实际上是在对整个结构进行深度优先的节点搜索。但是这些优点都是用操作的代价换取的，比如每次顶级执行一次</span><span style="font-size: 14px; color: rgb(69, 69, 69); font-family: Monaco; font-variant-caps: normal;">show</span><span style="font-size: 14px; color: rgb(69, 69, 69); font-family: Monaco; font-variant-caps: normal;">方法，实际的操作就是整个树形结构的节点都会被遍历一次。但是组合对象的每个对象之间的耦合非常松散，可以简单的操作处理复杂的结果。</span></div><div><br/></div><div><span style="font-size: 14px; color: rgb(69, 69, 69); font-family: Monaco; font-variant-caps: normal;">    简单的说，组合模式是讲一批子对象组织为树形结构，一条顶层的命令会在操作树中所有的对象。提高了代码的模块化程度，对于动态的</span><span style="font-size: 14px; color: rgb(69, 69, 69); font-family: Monaco; font-variant-caps: normal;">HTML</span><span style="font-size: 14px; color: rgb(69, 69, 69); font-family: Monaco; font-variant-caps: normal;">界面具有很强的适</span><span style="font-size: 14px; color: rgb(69, 69, 69); font-family: Monaco; font-variant-caps: normal;">用性</span></div></div><div><br/></div><div><span style="font-size: 18px; font-family: Monaco;">观察者模式</span></div><div style="box-sizing: border-box; padding: 8px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);"><div><br/></div><div><span style="font-size: 14px; color: rgb(69, 69, 69); font-family: Monaco; font-variant-caps: normal;">    观察者模式又叫发布订阅模式（</span><span style="font-size: 14px; color: rgb(69, 69, 69); font-family: Monaco; font-variant-caps: normal;">Publish/Subscribe</span><span style="font-size: 14px; color: rgb(69, 69, 69); font-family: Monaco; font-variant-caps: normal;">），它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己。</span></div><div><br/></div><div><span style="font-size: 14px; color: rgb(69, 69, 69); font-family: Monaco; font-variant-caps: normal;">使用观察者模式的好处：</span></div><div><span style="font-size: 14px; color: rgb(69, 69, 69); font-family: Monaco; font-variant-caps: normal;">    1.支持简单的广播通信，自动通知所有已经订阅过的对象。</span></div><div><span style="font-size: 14px; color: rgb(69, 69, 69); font-family: Monaco; font-variant-caps: normal;">    2.页面载入后目标对象很容易与观察者存在一种动态关联，增加了灵活性。</span></div><div><span style="font-size: 14px; color: rgb(69, 69, 69); font-family: Monaco; font-variant-caps: normal;">    3.目标对象与观察者之间的抽象耦合关系能够单独扩展以及重用。</span></div><div><br/></div><div><span style="font-size: 14px; font-family: Monaco;">    代表案例：看孩子还是打麻将</span></div><div><br/></div></div><div><br/></div><div><br/></div><div><span style="font-size: 18px; font-family: Monaco;">MVC模式（扩展）</span></div><div style="box-sizing: border-box; padding: 8px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);"><div><br/></div><div><span style="font-size: 14px; color: rgb(69, 69, 69); font-family: Monaco; font-variant-caps: normal;">    MVC模式，全名：Model View Controller，模型 视图 控制器</span></div><div><span style="font-size: 14px; color: rgb(69, 69, 69); font-family: Monaco; font-variant-caps: normal;">    视图：用户直观看到的页面</span></div><div><span style="font-size: 14px; color: rgb(69, 69, 69); font-family: Monaco; font-variant-caps: normal;">    模型：按照要求来取出数据</span></div><div><span style="font-size: 14px; color: rgb(69, 69, 69); font-family: Monaco; font-variant-caps: normal;">    控制器：向系统发出指令的工具</span></div><div><br/></div><div><span style="font-size: 14px; color: rgb(69, 69, 69); font-family: Monaco; font-variant-caps: normal;">    工作流程：</span></div><div><span style="font-size: 14px; color: rgb(69, 69, 69); font-family: Monaco; font-variant-caps: normal;">        1.浏览器，调用控制器，对他发出指令</span></div><div><span style="font-size: 14px; color: rgb(69, 69, 69); font-family: Monaco; font-variant-caps: normal;">        2.控制器，按指令选取一个合适的模型</span></div><div><span style="font-size: 14px; color: rgb(69, 69, 69); font-family: Monaco; font-variant-caps: normal;">        3.模型，按控制器指令取出相应的数据</span></div><div><span style="font-size: 14px; color: rgb(69, 69, 69); font-family: Monaco; font-variant-caps: normal;">        4.控制器，按指令取出相应的视图</span></div><div><span style="font-size: 14px; color: rgb(69, 69, 69); font-family: Monaco; font-variant-caps: normal;">        5.把第三步取到的数据按照用户想要的样子在视图显示出来</span></div><div><br/></div></div><div><br/></div><div><br/></div><div><br/></div><div><span style="font-size: 18px; font-family: &quot;Helvetica Neue&quot;;">掌握单例模式</span></div><div><span style="font-size: 18px; font-family: &quot;Helvetica Neue&quot;;">掌握组合模式</span></div><div><span style="font-size: 18px; font-family: &quot;Helvetica Neue&quot;;">掌握观察者模式</span></div><div><span style="font-size: 18px; font-family: &quot;Helvetica Neue&quot;;">使用单例模</span><span style="font-size: 18px; font-family: &quot;Helvetica Neue&quot;;">式封装信息提示框插件</span></div><div><br/></div><div><br/></div><div><span style="font-size: 18px; font-family: &quot;Helvetica Neue&quot;;">掌握观察者模式应用</span></div><div><span style="font-size: 18px; font-family: &quot;Helvetica Neue&quot;;">掌握设计模式的应用</span></div><div><br/></div><div><br/></div><div><br/></div><div><span style="font-size: 18px; font-family: &quot;Helvetica Neue&quot;;">代理模式</span></div><div style="box-sizing: border-box; padding: 8px; font-size: 12px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);"><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">代理模式分成两个部分，一个部分是</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(241, 79, 154); font-family: Monaco; font-weight: bold;">本体</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">; 即为你想要实现的功能；另一部分为</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(255, 70, 53); font-family: Monaco; font-weight: bold;">代理</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">；代理可以代替本体实例化；</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">代理一般使用在非常耗时的数据上，也会用在体积十分庞大的本体上。</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">一句话总结代理模式：为其他对象提供代理，以控制这个对象的访问;</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">举个简单的例子:</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    小伙子想要送花给小姑娘，但是不好意思送，于是找到了快递小哥，小哥帮忙送花；在这里</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco; font-weight: bold;">小哥就是</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(255, 122, 116); font-family: Monaco; font-weight: bold;">代理</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">!</span></div><div><br/></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">//小姑娘(姑娘的名字);</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(70, 99, 204); font-family: Monaco;">var</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(228, 139, 0); font-family: Monaco;">girl</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(105, 137, 6); font-family: Monaco;">=</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(70, 99, 204); font-family: Monaco;">function</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">(</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(181, 138, 0); font-family: Monaco;">name</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">){</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(70, 99, 204); font-family: Monaco;">    this</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">.name</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(105, 137, 6); font-family: Monaco;">=</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">name;</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">}</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">//小伙子(想要送给谁)；</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(70, 99, 204); font-family: Monaco;">var</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(228, 139, 0); font-family: Monaco;">boy</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(105, 137, 6); font-family: Monaco;">=</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(70, 99, 204); font-family: Monaco;">function</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">(</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(181, 138, 0); font-family: Monaco;">girl</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">){</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(70, 99, 204); font-family: Monaco;">    this</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">.girl</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(105, 137, 6); font-family: Monaco;">=</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">girl;</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(70, 99, 204); font-family: Monaco;">    this</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">.</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(228, 139, 0); font-family: Monaco;">sendGift</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(105, 137, 6); font-family: Monaco;">=</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(70, 99, 204); font-family: Monaco;">function</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">(</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(181, 138, 0); font-family: Monaco;">gift</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">){</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">        alert(</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(40, 156, 151); font-family: Monaco;">"你好，漂亮的"</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(105, 137, 6); font-family: Monaco;">+</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(70, 99, 204); font-family: Monaco;">this</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">.</span><a href="http://girl.name/" style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">girl.name</a><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(105, 137, 6); font-family: Monaco;">+</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(40, 156, 151); font-family: Monaco;">"，这是我送你的："</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(105, 137, 6); font-family: Monaco;">+</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">gift);</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">    }</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">}</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">//快递小哥(知道送给谁);</span></div><div><br/></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(70, 99, 204); font-family: Monaco;">var</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(228, 139, 0); font-family: Monaco;">porxyLitterBrother</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(105, 137, 6); font-family: Monaco;">=</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(70, 99, 204); font-family: Monaco;">function</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">(</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(181, 138, 0); font-family: Monaco;">girl</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">){</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(70, 99, 204); font-family: Monaco;">    this</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">.girl</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(105, 137, 6); font-family: Monaco;">=</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">girl;</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(70, 99, 204); font-family: Monaco;">    this</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">.</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(228, 139, 0); font-family: Monaco;">send</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(105, 137, 6); font-family: Monaco;">=</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(70, 99, 204); font-family: Monaco;">function</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">(</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(181, 138, 0); font-family: Monaco;">gift</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">){</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">        gift</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(105, 137, 6); font-family: Monaco;">=</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(40, 156, 151); font-family: Monaco;">"一个吻"</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">;</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">        (</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(105, 137, 6); font-family: Monaco;">new</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">boy(girl)).sendGift(gift);</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">    }</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">}</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">现在的送花就变得简单了;</span></div><div><br/></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(70, 99, 204); font-family: Monaco;">var</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">porxy</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(105, 137, 6); font-family: Monaco;">= new</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">porxyLitterBrother(</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(105, 137, 6); font-family: Monaco;">new</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">girl(</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(40, 156, 151); font-family: Monaco;">"花花"</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">));</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">porxy.send(</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(40, 156, 151); font-family: Monaco;">"钻戒"</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">);</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">一个人替你去做一些事情。 这个人保不齐还能捞点好处， 这就是代理模式;</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><br style="font-family: Monaco; font-size: 12px; color: rgb(51, 51, 51);"/></div></div><div><br/></div><div><br/></div><div><span style="font-size: 18px; font-family: &quot;Helvetica Neue&quot;;">适配器模式</span></div><div style="box-sizing: border-box; padding: 8px; font-size: 12px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);"><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(170, 121, 66); font-family: Monaco;">拓展：</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(170, 121, 66); font-family: Monaco;">    try{</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(170, 121, 66); font-family: Monaco;">        可能要报错的代码</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(170, 121, 66); font-family: Monaco;">    }catch(e){</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(170, 121, 66); font-family: Monaco;">        如果报错，执行此处代码</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(170, 121, 66); font-family: Monaco;">    }</span></div><div><br/></div><div><br/></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="font-size: 18px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">适配器模式</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">//</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(107, 231, 72); font-family: Monaco;">我们要对所有产品都进行一个标准化的测试，测试流程其中包括了</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(255, 122, 116); font-family: Monaco;">电话、短信、游戏、音乐</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">等等功能</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;"> </span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">//</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(150, 238, 125); font-family: Monaco;">但是对于一个平板来说，电话功能是无法使用的，因此测试会出问题。</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;"> </span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco; font-weight: bold;">所以将平板进行了包装（类似于代理）</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;"> </span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">//</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(150, 238, 125); font-family: Monaco;">这样就简单的解决了兼容问题</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">function test(product) {</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    try {</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">         product.phonecall();</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    } catch(e) {</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">         console.log("电话功能测试失败！")</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    }</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    try {</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">         product.playgame();</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    } catch(e) {</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">         console.log("游戏功能测试失败！")</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    }</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">}</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;"> </span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">function Phone(){</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    this.phonecall = function(){</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">}</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    this.playgame = function(){</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">}</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">   </span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">this.toString = function(){</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">         return "电话";</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    }</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">}</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">function Pad(){</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    this.playgame = function(){</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">}</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    this.toString = function(){</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">         return "平板";</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    }</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;"> </span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">}</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">//</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(255, 122, 116); font-family: Monaco; font-weight: bold;">适配器的意义，多数应用在系统接口使用，也就是别人提供了一个功能，但要求传入一个A类型的参数</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">//而我们手里的数据是B类型的，如果我们想使用这个功能。那么有两种解决办法：</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">//第一，把自己的原代码进行修改，让B类型改为A类型，这是非常蠢的做法。</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">//第二，我们把B类型的数据进行一个包装，让它看起来符合类型A，这个包装函数，就是适配器。</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;"> </span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">function Adapter(product){</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    this.phonecall = function(){</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">         if(product.phonecall) {</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">             product.phonecall();</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">         } else {</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">             console.log("this "+ product.toString() + " is not support function phonecall!")</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">         }</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    }</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    this.playgame = function(){</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">         if(product.playgame) {</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">             product.playgame();</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">         }</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    }</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">}</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">test(new Phone());</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">test(new Adapter(new Pad()));</span></div></div><div><br/></div><div><br/></div><div><span style="font-size: 18px; font-family: &quot;Helvetica Neue&quot;;">抽象工厂模式</span></div><div style="box-sizing: border-box; padding: 8px; font-size: 12px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);"><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">什么是工厂模式？</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    产出对象，创建类的一种设计模式。 </span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">为什么要用工厂模式？</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    当有需求要大量出产相似对象的时候需要用到工厂模式。</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">工厂模式怎么用？</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    创建对象使用的设计模式， 主要分成原料，加工和出厂三个部分。 </span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">想要创建一个对象，对象名为car;</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div style="box-sizing: border-box; padding: 8px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);"><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">var car = {};</span></div></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">想要对car进行组装， 有轮子，和发动机。</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div style="box-sizing: border-box; padding: 8px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);"><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">car.wheel = "15";</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">car.engine = "V8";</span></div></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">一个车对象产生了。 </span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">我们能看到的对象大概是这样的。 </span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">car { </span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    wheel : 15,</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    engine : V8</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">}</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">这就是一个实用的对象，而现在我们需求升级， 我们需要制造出各种各样不同的车，12寸轮廓的，V6发动机的，各种各样的组合，那么怎么出产这样的抽象汽车对象那？</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">我们需要有一个模型， 也就是这个模具构建了这个车大概的样子， 类似于一张设计图。 详细的信息我们根据需求在后续事件为其添加内容 。</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">这种模式，就是所谓的抽象工厂模式。 </span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">当然工厂模式是有固定的模式的，这个模式大概是这个样子的。 </span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">var factory = (function(){</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    var car = function (wheel,engine){</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(255, 0, 0); font-family: Monaco; font-weight: bold;">//内部配置函数，可以提供配置功能。</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">        this.wheel = wheel;</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">        this.engine = engine;</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    }</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(65, 173, 28); font-family: Monaco;">    return</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">function(wheel , engine){</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(255, 70, 53); font-family: Monaco; font-weight: bold;">// 构造器， 负责创建对象。</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;"> </span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(70, 70, 70); font-family: Monaco;">// 这是对外提供的接口， 负责和外部需求连接。</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;"> </span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(65, 173, 28); font-family: Monaco;">        return</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">new car(wheel,engine);</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    }</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">})()</span></div><div><br/></div></div><div><br/></div><div><br/></div><div>策略模式</div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><br/></div></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div></body></html>